/*
 * @Author: 18163104359 2205227953@qq.com
 * @Date: 2024-01-23 14:39:59
 * @LastEditors: 18163104359 2205227953@qq.com
 * @LastEditTime: 2024-01-23 17:04:43
 * @FilePath: /umi/src/layouts/components/AppConfig/index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useEffect } from "react";
import { connect, useDispatch, history } from "umi";
import { Avatar, Dropdown, Tooltip, Drawer } from "antd";
import { UserOutlined, FullscreenOutlined, ZoomInOutlined } from "@ant-design/icons";
import SettingPage from "./Setting";
import screenfull from "screenfull";
import FullScrenn from "@/utils/fullScreen";
import "./index.less";
const AppCongfg = (props) => {
  const { appConfig, dispatch } = props;
  // 控制布局设置抽屉
  const [drawerShow, setDrawerShow] = useState(false);

  // 全屏
  const [isScreenFull, setIsScreenFull] = useState(false); //是否全屏

  useEffect(() => {
    //初始化
    FullScrenn.init(screenChange);
  }, []);

  //屏幕变化
  const screenChange = (isFull) => {
    setIsScreenFull(isFull);
  };

  //点击图标执行的事件
  const gotoIcon = (value, index) => {
    if (isScreenFull) {
      //退出全屏
      console.log("退出全屏");
      FullScrenn.exitFullScreen();
      setIsScreenFull(false);
    } else {
      //进入全屏
      console.log("进入全屏");

      FullScrenn.enterFullScreen();
      setIsScreenFull(true);
    }
  };
  const items = [
    {
      key: "3",
      label: (
        <a
          target="_blank"
          rel="noopener noreferrer"
          onClick={() => {
            history.push("user/index");
          }}
        >
          个人中心
        </a>
      ),
    },
    {
      key: "2",
      label: (
        <a
          target="_blank"
          rel="noopener noreferrer"
          onClick={() => {
            dispatch({
              type: "appConfig/setDrawerShow",
              payload: true,
            });
          }}
        >
          布局设置
        </a>
      ),
    },
    {
      key: "1",
      label: (
        <a
          target="_blank"
          rel="noopener noreferrer"
          onClick={() => {
            history.push("user/index");
          }}
        >
          退出登录
        </a>
      ),
    },
  ];

  return (
    <div className="appConfigBox">
      <div className="item">
        <Tooltip placement="top" title="放大/缩小">
          <FullscreenOutlined style={{ fontSize: 26, color: "#8c8c8c" }} onClick={gotoIcon} />
        </Tooltip>
      </div>
      <div className="item">
        <ZoomInOutlined style={{ fontSize: 26, color: "#8c8c8c" }} />
      </div>
      <div className="item">
        <Dropdown menu={{ items }}>
          <Avatar
            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
            // src={process.env.BASE_URL + user.userInfo.avatar || "../../../assets/yay.jpg"}
            shape="square"
            size={50}
            alt="..."
          />
        </Dropdown>
      </div>

      <Drawer
        title="布局设置中心"
        onClose={() => {
          dispatch({
            type: "appConfig/setDrawerShow",
            payload: false,
          });
        }}
        open={appConfig.drawerShow}
      >
        <SettingPage />
      </Drawer>
    </div>
  );
};
export default connect((state) => ({ appConfig: state.appConfig, user: state.user }))(AppCongfg);
